<template>
  <div class="hello" ref="hello">
    <div class="h-text">
      <p>
        亲爱的<span v-if="props.stats?.user !== '无'" class="keyword">{{
          props.stats?.user
        }}</span>
        <span v-else class="keyword">{{ backupName }}</span>
      </p>
      <p @click="numFun(0, 20)">这是协同办公系统陪伴你的</p>
      <p>
        第<span class="keyword">{{ props.stats?.joinYear }}</span>年
      </p>
      <p>这些年我们一起</p>
      <p>经历的改变</p>
      <p>想在这里说给你听</p>
    </div>

    <img class="h-bg" src="@/assets/img/hello/bg.png" />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { slideUp } from "@/utils/slide";
import { getUsername } from "@/utils/base/common-storage";

const emit = defineEmits(["slideUp"]);

const props = withDefaults(
  defineProps<{
    stats: any;
  }>(),
  {
    stats: {
      user: "无",
      joinYear: 0,
    },
  }
);

onMounted(() => {
  slideUp(hello.value, () => {
    console.log("hello");
    emit("slideUp");
  });
});

const hello = ref(null);

const amount = ref(0);

const backupName = ref(getUsername());

const numFun = (startNum, maxNum) => {
  let numText = startNum;
  let golb; // 为了清除requestAnimationFrame
  function numSlideFun() {
    // 数字动画
    numText += 2; // 速度的计算可以为小数 。数字越大，滚动越快
    if (numText >= maxNum) {
      numText = maxNum;
      cancelAnimationFrame(golb);
    } else {
      golb = requestAnimationFrame(numSlideFun);
    }
    amount.value = numText;
    // console.log(numText)
  }
  numSlideFun(); // 调用数字动画
};
</script>

<script lang="ts">
export default {
  name: "HelloPage",
};
</script>

<style lang="scss" scoped>
.hello {
  @include full-screen-relative;
}

.h-text {
  @include animation-fade-in;
  position: absolute;
  top: $text-top;
  left: $text-left;
  height: 798px;
  width: 750px;
  font-size: 30px;
  font-family: ChangAnunitype;
  font-weight: 500;
  color: #ffffff;

  /* transition: all 3s;
  opacity: 1;
  &:hover {
    opacity: 0.5;
    color: red;
  } */
  p {
    margin-top: 26px;
  }

  .year {
    font-size: 36px;
  }
}

.h-bg {
  @include animation-move-up;
  position: fixed;
  bottom: 0;
  height: 798px;
  width: 750px;
}</style>
